<template>
  <div ref="imageDom" class="goodsBox">
    <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="20%" status-icon style="background-color: white">
      <el-row :gutter="150">
        <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="24">
          <el-col :xs="30" :sm="12" :md="12" :lg="12" :xl="12" style="margin-top: 20px ;width: 100%">
            {{this.title}}
          </el-col>
          <el-col :xs="30" :sm="12" :md="12" :lg="12" :xl="12" style="margin-top: 10px">
            <el-form-item class="z" label="车牌" prop="licencePlate">
              <el-input :disabled="button" v-model="dialogBindData.licencePlate" size="small" type="text" placeholder="请输入车辆车牌"/>
            </el-form-item>
          </el-col>
          <el-col :xs="30" :sm="12" :md="12" :lg="12" :xl="12" style="margin-top: 10px">
            <el-form-item class="z" label="车辆名称" prop="catName">
              <el-input :disabled="button" v-model="dialogBindData.catName" size="small" type="text" placeholder="请输入车辆名称"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item class="z" label="备注" prop="remake" >
              <el-input :disabled="button" v-model="dialogBindData.remake" size="small" type="text" placeholder="备注"/>
            </el-form-item>
          </el-col>
          <el-col :xs="30" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="保险到期" prop="insuranceDueTime" class="z">
            <el-date-picker
              :disabled="button"
              v-model="dialogBindData.insuranceDueTime"
              :disable="false"
              size="small"
              align="right"
              type="datetime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择保险到期时间" style="width: 100%"/>
          </el-form-item>
          </el-col>
          <el-col :xs="30" :sm="12" :md="12" :lg="12" :xl="12" v-show="false">
            <el-form-item label="最近养修"  prop="recentlyTime" class="z">
              <el-date-picker
                :disabled="button"
                v-model="dialogBindData.recentlyTime"
                :picker-options="startDatePicker"
                :disable="false"
                size="small"
                align="right"
                type="datetime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="最近养修时间" style="width: 100%"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item class="z" label="vin码" prop="vinCode">
              <el-input :disabled="button" v-model="dialogBindData.vinCode" size="small" type="text" placeholder="请输入vin码"/>
            </el-form-item>
          </el-col>
          <el-col :xs="30" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="年检到期" prop="asTime"  class="z">
              <el-date-picker
                :disabled="button"
                v-model="dialogBindData.asTime"
                :disable="false"
                size="small"
                align="right"
                type="datetime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="年检到期时间" style="width: 100%"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-show="false">
            <el-form-item class="z" label="养修里程" prop="serviceCycle">
              <el-input :disabled="button" v-model="dialogBindData.serviceCycle" size="small" type="number" placeholder="最近养修里程"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item class="z" label="引擎型号" prop="engineType">
              <el-input :disabled="button" v-model="dialogBindData.engineType" size="small" type="text" placeholder="发动机型号"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-show="false">
            <el-form-item class="z" label="养修次数" prop="maintainNumber">
              <el-input :disabled="button" v-model="dialogBindData.maintainNumber" size="small" type="number" placeholder="养修次数"/>
            </el-form-item>
          </el-col>
          <el-col v-show="show1" :xs="30" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="创建时间" prop="createTime" class="z">
              <el-date-picker
                :disabled="button"
                v-model="dialogBindData.createTime"
                :picker-options="startDatePicker"
                :disable="false"
                size="small"
                align="right"
                type="datetime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="创建时间" style="width: 100%"/>
            </el-form-item>
          </el-col>
          <el-col v-show="show1" :xs="30" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="更新时间" prop="updateTime" class="z">
              <el-date-picker
                :disabled="button"
                v-model="dialogBindData.updateTime"
                :picker-options="startDatePicker"
                :disable="false"
                size="small"
                align="right"
                type="datetime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="更新时间" style="width: 100%"/>
            </el-form-item>
          </el-col>
          <el-col v-show="show1" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item class="z" label="创建人" prop="creator">
              <el-input :disabled="button" v-model="dialogBindData.creator" size="small" type="text" placeholder="请输入创建人"/>
            </el-form-item>
          </el-col>
          <el-col v-show="show1" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item class="z" label="更新人" prop="updateOne">
              <el-input :disabled="button" v-model="dialogBindData.updateOne" size="small" type="text" placeholder="请输入更新人"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item class="z" label="车声颜色" prop="colour">
              <el-input :disabled="button" v-model="dialogBindData.colour" size="small" type="text" placeholder="请输入车声颜色"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-show="false">
            <el-form-item class="z" label="养修金额" prop="revisedAmount">
              <el-input :disabled="button" v-model="dialogBindData.revisedAmount" size="small" type="number" placeholder="请输入养修金额"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-show="false">
            <el-form-item class="z" label="待结金额" prop="amountSettled">
              <el-input :disabled="button" v-model="dialogBindData.amountSettled" size="small" type="number" placeholder="请输入待结算金额"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item class="z" label="前胎规格" prop="frontTyres">
              <el-input :disabled="button" v-model="dialogBindData.frontTyres" size="small" type="text" placeholder="前轮胎规格"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item class="z" label="后轮规格" prop="rearTire">
              <el-input :disabled="button" v-model="dialogBindData.rearTire" size="small" type="text" placeholder="后轮胎规格"/>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>



      <div style="text-align: center;padding: 50px 0;margin-right: 100px">
        <!--        @click="submmitFun"-->
        <el-button  @click="black" type="primary" round style="padding: 10px 50px;margin-right: 100px;color: black;background: #eeeeee" >取消</el-button>
        <el-button  type="primary" :disabled="button" round style="padding: 10px 50px" @click="submmitFun" >保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import {isvalidNull, validatePhone, vin} from "../../utils/validate";
  import * as userMessage from "../../utils/auth";
  import * as member from "../../api/member";

  export default {
    data(){
      const mVinCode = (rule, value, callback) => {
        if (!isvalidNull(value)) {
          callback(new Error('请输入vin码'))
        } else if (value.length!==17||!vin(value)) {
          callback(new Error('请输入正确的vin码'))
        } else {
          callback()
        }
      }
      return{
        button:false,
        actionType:'',
        Sexdata:'',
        show1:false,
        title:'',
        startDatePicker: this.beginDate(),
        corporateName:"",
        companyAbbreviation:"",
        createTime:"",
        createPhone:"",
        openingTime:"",
        expirationDate:"",
        contacts:"",
        contactNumber:"",
        contactAddress:"",
        contactLogo:"static/images/uploadPic.png",
        introduction:"",
        dialogBindData: {
          ncId:'',
          nmId:'',
          isBlacklist:'',
          licencePlate:'',
          catName:'',
          remake:'',
          insuranceDueTime:'',
          recentlyTime:'',
          vinCode:'',
          asTime:'',
          serviceCycle:'',
          engineType:'',
          maintainNumber:'',
          createTime:'',
          updateTime:'',
          creator:'',
          updateOne:'',
          colour:'',
          revisedAmount:'',
          amountSettled:'',
          frontTyres:'',
          rearTire:'',
        },
        rules: {
          licencePlate: [
            { required: true, message: '请输入车牌', trigger: 'blur' },
          ],
          catName:[
            { required: true, message: '请输入车辆名称', trigger: 'blur' },
          ],
          insuranceDueTime:[
            { required: true, message: '请完善保险到期时间', trigger: 'blur' },
          ],
          vinCode:[
            { required: true, validator: mVinCode, trigger: 'blur' },
          ],
          asTime:[
            { required: true, message: '请完善保险到期时间', trigger: 'blur' },
          ],
        },
      }
    },

    computed: {

    },

    beforeMount() {
      console.log(this.$route.params.data)
      this.Sexdata=this.$route.params.data
      if(this.$route.params.data.ncId) {
        this.title = '编辑车辆'
        this.actionType=1
        this.quanxian()
        this.reBindData(this.$route.params.data)
      }else{
        this.actionType=2
        this.title = '添加车辆'
        this.show1=false
        this.dialogBindData.nmId=this.$route.params.data.nmId
      }
    },
    methods: {
      beginDate() {
        const self = this
        return {
          disabledDate(time) {
            //alert(time.getTime()+"  "+new Date(self.dialogBindData.lastTime).getTime()+"   "+Date.now())
            return time.getTime()>Date.now();
          }
        }
      },
      black(){
        this.$router.push({
          name: '/v1/membercar',
          params: {
            data: this.Sexdata
          }
        })
      },
      submmitFun() {
        this.$refs.dialogBindData.validate((valid) => {
          if(valid){
            const param = {

              nmId:this.dialogBindData.nmId,
              licencePlate:this.dialogBindData.licencePlate,
              isBlacklist:this.dialogBindData.isBlacklist,
              remake: this.dialogBindData.remake,
              insuranceDueTime:this.dialogBindData.insuranceDueTime,
              recentlyTime:this.dialogBindData.recentlyTime,
              vinCode:this.dialogBindData.vinCode,
              asTime:this.dialogBindData.asTime,
              serviceCycle: this.dialogBindData.serviceCycle,
              engineType: this.dialogBindData.engineType,
              maintainNumber:this.dialogBindData.maintainNumber,
              updateTime:'',
              colour:this.dialogBindData.colour,
              revisedAmount: this.dialogBindData.revisedAmount,
              amountSettled: this.dialogBindData.amountSettled,
              frontTyres:this.dialogBindData.frontTyres,
              rearTire:this.dialogBindData.rearTire,
              catName:this.dialogBindData.catName,
            }
            if(this.actionType===1){
              param.ncId=this.dialogBindData.ncId;
              param.creator=this.dialogBindData.creator;
              param.updateOne= JSON.parse(userMessage.getUserInformation()).userName;
              param.createTime=this.dialogBindData.createTime;
              member.editorMemberCat(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  return false
                }
                this.$message({
                  message: '编辑成功',
                  type: 'success',
                })
                this.buttonState = false
                this.reBindData(param)
              })

            }else if(this.actionType===2){
              param.creator=JSON.parse(userMessage.getUserInformation()).userName;
              param.updateOne='';
              //param.createTime=this.dialogBindData.createTime;

              member.insertMemberCat(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  return false
                }
                this.$message({
                  message: '添加成功',
                  type: 'success',
                })
                this.buttonState = false
                this.black();
              })
            }
          }
        })
      },
      reBindData(data) {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = data[key]
        }
      },
      quanxian(){
        var sys_user=JSON.parse(userMessage.getUserInformation());
        console.log(sys_user)
        if(!sys_user.neid||sys_user.neid==='1'){
          if(!sys_user.shopId){
            //平台
            if(sys_user.neid!=='1'){
              this.button=true;
            }
          }else{
            //门店
          }
        }else{
          //企业
        }
      },
    }
  }
</script>
<style type="text/scss" lang="scss">
  .z{
    width: 130%;
  }
  .goodsBox{
    .el-form-item{
      margin-bottom: 12px;
    }
    .el-form-item__label{
      line-height: 18px;
      margin-top: 9px;
    }
    .el-form-item__error{
      top: 90%;
    }
    .el-pagination{
      text-align: right;
    }
    .el-dialog__header{
      margin-bottom: 0;
    }
    .el-table th{
      padding: 5px 0;
    }
  }
</style>
<style type="text/scss" lang="scss" scoped>
  .listName{
    margin: 0;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content:flex-end;
    background-color: white;
  }
  .address{
    font-size: 14px;
    color: #666;
    line-height: 40px;
  }
  .address span{
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
  .imgStyle{
    width: 100px;
    height: 100px;
    display: block;
  }
  .imgStyleImg{
    width: 100px;
    height: 100px;
    display: block;
  }
</style>

